<ion-header no-border>
  <ion-toolbar color="secondary">
    <ion-buttons start>
      <button ion-button (tap)="dismiss()">
        <span ion-text>Cancel</span>
      </button>
    </ion-buttons>
    <ion-title>Settings</ion-title>
    <ion-buttons end>
      <button ion-button (tap)="save()">
        <span ion-text>Apply</span>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding-top>

  <ion-list no-lines>
    <ion-list-header no-lines>
      Font size
      <ion-badge item-right text-lowercase>{{fontSize}}px</ion-badge>
    </ion-list-header>
    <ion-item>
      <ion-range min="10" max="50" item-content [(ngModel)]="fontSize" (ionChange)="setFontSize($event.value)">
        <ion-icon small range-left name="body"></ion-icon>
        <ion-icon range-right name="body"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>

  <ion-list no-lines>
    <ion-list-header no-lines>
      Brightness
      <ion-badge item-right>{{_brightness}}</ion-badge>
    </ion-list-header>
    <ion-item>
      <ion-range min="10" max="100" item-content [(ngModel)]="_brightness" (ionChange)="setBrightness($event.value)">
        <ion-icon small range-left name="sunny"></ion-icon>
        <ion-icon range-right name="sunny"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>

  <ion-list no-lines>
    <ion-item>
      <ion-label>
        <ion-icon item-start name="cloudy-night"></ion-icon>
        <span>Invert colors</span>
      </ion-label>
      <ion-toggle item-content [(ngModel)]="invertColors" (ionChange)="doInvertColors($event.value)"></ion-toggle>
    </ion-item>
  </ion-list>

  <ion-list no-lines>
    <ion-list-header no-lines>
      Auto scroll
      <ion-badge item-right>{{autoScrollSpeed}}</ion-badge>
    </ion-list-header>
    <ion-item>
      <ion-range min="10" max="1000" step="10" item-content [(ngModel)]="autoScrollSpeed">
        <ion-icon small range-left name="speedometer"></ion-icon>
        <ion-icon range-right name="speedometer"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>

  <ion-list no-lines padding-top>
    <ion-list-header no-lines no-margin>
      Sample output
    </ion-list-header>
    <ion-item class="result" text-wrap #resultIonItem>
      <ion-label #result padding>
        Spicy jalapeno bacon ipsum dolor amet nostrud kielbasa minim burgdoggen. Capicola corned beef in flank tempor. Deserunt prosciutto aliquip, rump t-bone ullamco swine ground round ut. Sed elit pork belly incididunt minim ut kevin, hamburger pork beef. Pig incididunt irure sausage venison ullamco, prosciutto salami filet mignon ham hamburger rump eu. Brisket ea minim ground round beef ribs ipsum andouille swine sunt irure magna pork loin tongue shankle pork chop. Ham ham hock nulla, ut nostrud bresaola shoulder eu.
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-list no-lines>
    <ion-list-header no-lines>
      Experimental features
    </ion-list-header>
    <ion-item>
      <ion-label>
        <ion-icon item-start name="swap"></ion-icon>
        <span>Horizontal scrolling</span>
      </ion-label>
      <ion-toggle item-content [(ngModel)]="horizontalScrolling"></ion-toggle>
    </ion-item>
    <ion-item class="warning">
      WARNING:<br/>Rendering chapters via horizontal scrolling is buggy, some text might get cut off if you use big font sizes, try limiting your font size to 20px. 
    </ion-item>
  </ion-list>


</ion-content>